<template>
  <div
    @click="itemclick"
    :class="{
    'item':true,
    'item-unselected':!selected,
     'item-selected':selected}"
  >
    <img :src="imgUrlShow"  class="xhimg">
    <span class="label">{{cmodel.name}}</span>
  </div>
</template>


<script>
// 引入要使用的组件
//import Home from '@/components/HelloWorld'

export default {
  name: "xxx",
  data() {
    return {
      // 数据初始化  init
      msg: "item"
    };
  },
  methods: {
    // 所有方法在这里实现
    //clickAction(){
    //我是例子
    //}
    itemclick(){
        console.log('发出：'+JSON.stringify(this.cmodel));
        this.$emit('handleClick',this.cmodel);
    }
  },
  mounted() {
    //获取 DOM 节点 == viewDidLoad
  },
  computed: {
    // selected() {
    //   return true;
    // }
    imgUrlShow(){
        const showName  =  this.selected ? this.cmodel.imgUrl : this.cmodel.imgUrlUN
        console.log(showName);
        return  showName
    }
  },
  props: {
    //给父类传值
    cmodel: {
      type: Object,
      default: {
        name: {
          type: String,
          default: ""
        },
        imgUrl: {
          type: String,
          default: "../../assets/loading.gif"
        }
      }
    },
    selected: {
      type: Boolean,
      default: false
    }
  }
};
</script>
<style scoped>
/* 样式处理 */
.item {
  background-color: white;
  height: 100%;
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.item-unselected {
  color: black;
  background-color: white;
}
.item-selected {
  color: blue;
  background-color: gainsboro;
}
.xhimg {
  width: 20px;
  height: 20px;
}
.label {
  font-size: 12px;
}
</style>